<template>
    <div id="x-button">
        <el-slider></el-slider>
      <el-input v-if="isShowInput" v-model="content" @input="onChangeVal" style="margin-right:8px"></el-input>
      <el-button size="mini" type="primary" @click="changeUnit">{{ title }}</el-button>
    </div>
  </template>
    
    <script>
  export default {
    name: "InputColorPicker",
    emits:['onChangeVal'],
    props: {
      unit: {
          default () {
              return ['inherit', 'px', 'em', '%']
          }
      },
      value:{
        default () {
              return 0
          }
      }
    },
    created () {
      this.title = this.unit[0]
      this.content = this.value
    },
    data () {
      return {
        content:'',
        title:''
      }
    },
    computed: {
      isShowInput: function () {
        
        if (this.title) {
          if (
            this.title === "px" ||
            this.title === "em" ||
            this.title === "%"
          ) {
            return true;
          } else {
            return false;
          }
        }
        return false
      },
    },
    methods:{
      changeUnit() {
          let nextUnit = ''
        
          for (let i = 0; i < this.unit.length; i ++) {
              if(this.unit[i] === this.title && (i < this.unit.length - 1)) {
                  nextUnit = this.unit[i + 1]
                  continue;
              }
          }
          if (!nextUnit) {
            nextUnit = this.unit[0]
          }
          this.title = nextUnit
          this.onChangeVal()
      },
      onChangeVal () {
        if (this.title === 'px' || this.title === 'em' || this.title === '%') {
          this.$emit('onChangeVal',this.content  + this.title)
    
        }else {
          this.$emit('onChangeVal','')
        }
  
      },
  
    }
  };
  </script>
    
    <style>
    #x-button {
      display: flex;
      flex-wrap: nowrap;
    }
  </style>